<template>
	<view style="background-color: #FFF;">
		<u-back-top :scroll-top="scrollTop" top="500"></u-back-top>
		
		<view class="banner-box">
			<u-swiper
					:list="bannerList"
					keyName="image"
					
					indicator
					indicatorMode="line"
					circular
			></u-swiper>
		</view>
		
		<view class="category-box">
			<u-scroll-list>
				<view class="scroll-list" style="flex-direction: row;">
					<view
							class="scroll-list__goods-item"
							v-for="(item, index) in categoryList"
							:key="index"
							@click="clickCategory(item.id)"
					>
						<u-icon
								:label="item.title" 
								labelPos="bottom" 
								:name="item.icon" 
								:size="58"
								:labelSize="13"
								:labelColor="black"
						></u-icon>
					</view>
				</view>
			</u-scroll-list>
		</view>
		
		<view class="top-post-box">
			<view class="top-title">
				<text>置顶区</text>
			</view>
			<block v-for="(topPost,index) in topPostList" :key="topPost.id">
				<view class="top-post-item">
					<navigator :url="'/pages/detail/detail?pid='+topPost.id">
						<text v-if="index===0" style="color: #FE2D46;">{{(index+1)}}</text>
						<text v-else-if="index===1" style="color: #FF6600;">{{(index+1)}}</text>
						<text v-else-if="index===2" style="color: #FAA901;">{{(index+1)}}</text>
						<text v-else style="color: #9195A3;">{{(index+1)}}</text>
						
						<text style="margin: 0 8px; font-weight: bold;">{{topPost.category.title}}</text>
						<text>{{topPost.title}}</text>
					</navigator>
				</view>
			</block>
		</view>
		
		<!-- todo 分页z-paging -->
		<u-sticky>
			<view class="tab-box">
				<v-tabs
						v-model="current" 
						:tabs="categoryList" field="title" 
						:pills="true" 
						line-height="0" 
						activeColor="#333" 
						pillsColor='rgb(255,230,15)'
						
						@change="changeTab"
				></v-tabs>
			</view>
		</u-sticky>
		<z-paging ref="paging" use-page-scroll v-model="latestPostList" @query="queryList">
			<view class="latest-post-box">
				<block v-for="(latestPost,index) in latestPostList" :key="latestPost.id">
					<view class="post-item">
						<view class="level-1">
							<navigator :url="'/pages/detail/detail?pid='+latestPost.id">
								<view class="post-title">
									<text>{{latestPost.title}}</text>
								</view>
							</navigator>
						</view>
						<view class="level-2">
							<view class="post-tag-item"
									v-for="tag in latestPost.tags"
									:key="tag.id"
							>
								<u-tag :text="tag.name" :type="tag.type" plain shape="circle"></u-tag>
							</view>
						</view>
						<view class="level-3">
							<text>{{latestPost.user.name + '发布于' + latestPost.createTime}}</text>
							<view style="display: flex; justify-content: flex-end;gap: 10px;">
								<u-icon :label="latestPost.readCount" labelColor="#909399" name="eye" size="18"></u-icon>
								<u-icon :label="latestPost.readCount" labelColor="#909399" name="heart" size="18"></u-icon>
							</view>
						</view>
					</view>
				</block>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				
				bannerList: [
					{
						id: '1',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png'
					},
					{
						id: '2',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png'
					}
				],
				
				current: 0,
				categoryList: [
					{
						id: '1',
						title: '招聘求职',
						icon: 'home'
					},
					{
						id: '2',
						title: '房屋出租',
						icon: 'home',
					},
					{
						id: '3',
						title: '二手物品',
						icon: 'home',
					},
					{
						id: '4',
						title: '二手物品',
						icon: 'home',
					},
					{
						id: '5',
						title: '二手物品',
						icon: 'home',
					},
					{
						id: '6',
						title: '二手物品',
						icon: 'home',
					},
					{
						id: '7',
						title: '二手物品',
						icon: 'home',
					},
					{
						id: '8',
						title: '二手物品',
						icon: 'home',
					},
					{
						id: '9',
						title: '二手物品',
						icon: 'home',
					}
				],
				
				topPostList: [
					{
						id: '101',
						title: '招聘一个保安，月1800 996，包吃包住招聘一个保安，月1800 996，包吃包住',
						category: {
							id: '1',
							title: '招聘求职'
						}
					},
					{
						id: '102',
						title: '招聘一个服务员，月3800 966，包吃包住',
						category: {
							id: '1',
							title: '招聘求职'
						}
					},
					{
						id: '103',
						title: '招聘一个服务员，月3800 966，包吃包住',
						category: {
							id: '2',
							title: '房屋出租'
						}
					},
					{
						id: '104',
						title: '招聘一个服务员，月3800 966，包吃包住',
						category: {
							id: '3',
							title: '二手物品'
						}
					},
					{
						id: '105',
						title: '招聘一个服务员，月3800 966，包吃包住',
						category: {
							id: '3',
							title: '二手物品'
						}
					}
				],
				
				latestPostList: [
					{
						id: '101',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个保安，月1800 996，包吃包住招聘一个保安，月1800 996，包吃包住招聘一个保安，月1800 996，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 100,
					},
					{
						id: '102',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},
					{
						id: '103',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},
					{
						id: '104',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},{
						id: '105',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},{
						id: '106',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},{
						id: '107',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},{
						id: '108',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},{
						id: '109',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},{
						id: '110',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					}
				]
			}
		},
		onPullDownRefresh() {
			// 调用z-paging的reload方法，刷新列表
			this.$refs.paging.reload().catch(() => {});
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			clickCategory(id) {
				uni.navigateTo({
					url: '/pages/category/category?cid='+id
				})
			},
			clickPost(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?pid='+id
				})
			},
			queryList(pageNo, pageSize) {
				console.log('分页参数', pageNo, pageSize)
				let res = [
					{
						id: '101',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个保安，月1800 996，包吃包住招聘一个保安，月1800 996，包吃包住招聘一个保安，月1800 996，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 100,
					},
					{
						id: '102',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},
					{
						id: '103',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},
					{
						id: '104',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},{
						id: '105',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},{
						id: '106',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},{
						id: '107',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},{
						id: '108',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},{
						id: '109',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					},{
						id: '110',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '保安', type: 'primary' },
							{ id: '2', name: '包吃', type: 'success'},
							{ id: '3', name: '包住', type: 'success'},
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					}
				]
				this.$refs.paging.complete(res)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner-box {
		padding: 0 $uni-spacing-row-base;
	}
	
	.category-box {
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		
		.scroll-list {
			@include flex(column);
			.scroll-list__goods-item:not(:last-child) {
				margin-right: 25px;
			}
		}
	}
	
	.top-post-box {
		padding: 0 $uni-spacing-row-base $uni-spacing-col-base $uni-spacing-row-base;
		border-top: 1px solid #F3F4F6;
		
		.top-title {
			font-size: $uni-font-size-title;
			color: red;
			margin-top: 10px;
			margin-bottom: 15px;
		}
		.top-post-item:not(:last-child) {
			margin-bottom: 20px;
		}
	}
	
	.tab-box {
		margin: 0 $uni-spacing-row-base;
		border-top: 1px solid #F3F4F6;
		border-bottom: 1px solid #f3f4f6;
	}
	
	.latest-post-box {
		margin: 0 $uni-spacing-row-base;
		
		.post-item {
			padding: 8px;
			border-bottom: 1px solid #F3F4F6;
			
			.level-1 {
				margin-bottom: 15px;
			}
			.level-2 {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				margin-bottom: 15px;
				.post-tag-item { margin-right: 10px; }
			}
			.level-3 {
				font-size: $uni-font-size-base;
				color: #909399;
				
				display: flex;
				justify-content: space-between;
				
				margin-bottom: 10px;
			}
		}
	}
</style>
